<template>
	<view>
		<w-navbar type="normal" background="linear-gradient(60deg, #3d3393 0%, #2b76b9 37%, #2cacd1 65%, #35eb93 100%)">
			<view slot="navbar-center">顶部提示</view>
		</w-navbar>

		<w-topTips ref="topTips">
			<text class="iconfont icon-ww"></text>
			<text style="margin-left: 10rpx;">这是自定义的内容哦!</text>
		</w-topTips>

		<pageDemoBlock title="基本用法" color="#1c87e4">
			<view class="m-b-2">
				<w-button type="primary" @click="showtopTips(1)">默认提示</w-button>
			</view>
			<view class="m-b-2">
				<w-button type="primary" @click="showtopTips(2)">更换类型</w-button>
			</view>
		</pageDemoBlock>
		<pageDemoBlock title="自定义关闭时长/自定义内容" color="#e44211">
			<view class="m-b-2">
				<w-button type="primary" @click="showtopTips(3)">自定义时间(1.5秒)</w-button>
			</view>
			<view class="m-b-2">
				<w-button type="primary" @click="showtopTips(4)">自定义内容</w-button>
			</view>
		</pageDemoBlock>
	</view>
</template>
</view>
<script>
	import pageDemoBlock from '@/components/page-demo-block'
	export default {
		components: {
			pageDemoBlock
		},
		methods: {
			showtopTips(num) {
				switch (num) {
					case 1:
						this.$refs.topTips.show({
							title: '这是一个默认提示!'
						})
						break
					case 2:
						this.$refs.topTips.show({
							type: 'warning',
							title: '这是一个警告提示!'
						})
						break
					case 3:
						this.$refs.topTips.show({
							type: 'success',
							duration: 1500,
							title: '这是一个成功提示!'
						})
						break
					case 4:
						this.$refs.topTips.show({
							type: 'info',
							duration: 1500
						})
						break
				}

			}
		}
	}
</script>

<style lang="scss" scoped>

</style>
